<%@page import="com.entity.Product"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>浏览记录</title>
    
	<meta charset="UTF-8">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		.bros-body{
			width: 200px;
			position: fixed;
			top: 20px;
			bottom: 20px;
			padding: 10px 0px;
		}
		.mybros-body{
			width: 150px;
			height: 100%;
			padding: 0px 10px;;
			float: left;
			border: 1px solid #dcdcdc;
			border-radius: 5px;
			background: #fcfcfc;
			overflow: auto;
		}
		.bros-mybro{
			background: white;
			margin: 0px;
		}
		.bors-link{
			width: 15px;
			border-radius: 3px;
			margin-top: 120%;
			padding: 5px;
			float: left;
			background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
		}
		.bors-link:hover{
			background: orange;	
		}
		.bros-body>div{
			display: inline-block;
		}
		.bros-mybro:hover{
			border: 1px solid gray;
			box-shadow: 0px 0px 3px gray;
		}
		.bros-mybro>img{
			width: 120px;
			height: 120px;
			margin-top: 5px;
		}
		.bros-mybro>a{
			text-decoration: none;
			font-size: 15px;
		}
		.bros-mybro>a:HOVER{
			text-decoration: underline;
			color: red;
		}
		.mybros-body>ul{
			padding: 0px;
		}
		.bros-mybro{
			margin: 5px 0px;
			list-style-type: none;
			text-align: center;
			border: 1px solid #dcdcdc;
			border-radius: 5px;
		}
		.bros-mybro>span{
			font-size: 10px;
		}
	</style>
	<script src="js/jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".bors-link").click(function(){
				$(".mybros-body").toggle();
			});
		});
		function linkpro( proid ){
			location="proInfo.jsp?id="+proid;
		}
	</script>
  </head>
  
  <body class="mybody">
    <div class="bros-body">
    	<div class="mybros-body" style="display: none">
	    	<ul>
	   		<%-- <%
	   		//利用session取浏览记录
	   		List<Product> brolist=(List<Product>)session.getAttribute("brolist");
	   		if(brolist!=null){
	   			for(Product mybro:brolist){
	   		%>
	   			<li class="bros-mybro">
	   				<img src="images/p1.png"/>
	   				<a href="proinfo.jsp?id=<%=mybro.getId()%>"><%=mybro.getPname() %>[￥<%=mybro.getPrice() %>]</a>
	   			</li>
	   		<%
	   			}
	   		}
	   		%> --%>
	   		<%
	   			Cookie[] cks=request.getCookies();
	   			if(cks!=null){
	   				for(Cookie ck:cks){
	   					if(ck.getName().startsWith("bro_")){
	   						String[] strs=ck.getValue().split("-");
	   		%>
	   			<li class="bros-mybro" onclick="linkpro(<%=strs[0] %>)">
	   				<img src="<%=strs[3].equals("null")?"images/p1.png":strs[3]%>"/><br/>
	   				<span><%=strs[1] %>[￥<%=strs[2] %>]</span>
	   			</li>			
	   		<%
	   					}
	   				}
	   			}
	   		%>
	    	</ul>
    	</div>
    	<div class="bors-link">
    		<div id="linkbros">浏览记录</div>
    	</div>
    </div>
  </body>
</html>
